.DevExtremeConfig {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .TreeTemplate {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;

        &>.SearchBox {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>button {
                margin: 4px;
            }
        }

        .TreeBox {
            width: 100%;
            flex: 1;
            overflow-y: scroll;
            margin: 8px 0;
            background: transparent;
            user-select: none;

            .ant-tree-node-content-wrapper {
                padding: 4px;
                display: flex;
                align-items: center;
                justify-content: flex-start;

            }

            .ant-tree-title {
                color: var(--fontColor);
                font-family: var(--fontFamily);
                font-weight: var(--fontWeight);
                font-style: var(--fontStyle);
                font-size: calc(var(--fontSize) * 1px);
                filter: drop-shadow(calc(var(--fontShadowX) * 1px) calc(var(--fontShadowY) * 1px) calc(var(--fontShadowS) * 1px) var(--fontShadowB));
            }

            &::-webkit-scrollbar {
                display: none;
            }

            .anticon {
                color: var(--iconColor);
                filter: drop-shadow(calc(var(--iconShadowX) * 1px) calc(var(--iconShadowY) * 1px) calc(var(--iconShadowS) * 1px) var(--iconShadowB));
            }

            .ant-tree-node-selected {
                background: var(--activeBack);

                .ant-tree-title {
                    color: #262626;
                    filter: drop-shadow(calc(var(--fontShadowX) * 1px) calc(var(--fontShadowY) * 1px) calc(var(--fontShadowS) * 1px) var(--activeShadowB));
                }
            }

            .ant-tree-switcher {
                display: flex;
                align-items: center;
                justify-content: center;
            }

        }
    }


    .DevPage {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        overflow: hidden;

        .TopMenu {
            width: 100%;
            margin-bottom: 8px;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>div {
                display: flex;
                align-items: center;
                justify-content: center;

                &>div {
                    display: flex;
                    align-items: baseline;
                    justify-content: center;
                    user-select: none;
                    cursor: pointer;

                    &>div {
                        margin: 0 2px;

                    }
                }
            }

        }


        .dx-splitter {
            flex: 1;
            overflow: hidden;
        }

        .DevGrid {
            height: 100%;

            .dx-menu-item-text {
                font-size: 24px;
            }

            .DevTemplate {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-direction: column;
                overflow: hidden;

                &>div:first-child {
                    flex: 1;
                    width: 100%;
                    overflow: hidden;
                }
            }

            .RowOptions {
                button {
                    height: auto;
                    padding: 0 4px;
                    margin: 0 var(--itemMargin);

                    &>span:not([class]) {
                        font-family: var(--fontFamily);
                        font-weight: var(--fontWeight);
                        font-style: var(--fontStyle);
                        font-size: calc(var(--fontSize) * 1px);
                        filter: var(--fontFilter);
                    }

                    &>.ant-btn-icon {
                        font-size: calc(var(--iconSize) * 1px);
                        filter: var(--iconFilter);
                    }
                }
            }
        }
    }

    .DevExtremeDataGrid {
        width: 100%;
        height: 100%;
    }
}